<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>侧滑菜单</title>
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<style type="text/css">
			html,
			body {
				width: 100%;
				height: 100%;
			}
			
			.mui-content {
				background-image: url(images/menu.png);
				background-repeat: no-repeat;
				background-attachment: fixed;
				background-size: auto 100%;
				padding-top: 6vw;
				width: 100%;
				height: 100%;
			}
			
			.mui-card {
				background-color: transparent;
				text-align: center;
				color: white;
			}
			
			.menu-cell {
				background-color: transparent;
				color: #c8c7cc;
			}
			
			#userheadimg {
				width: 60%;
				height: auto;
			}
			
			.mui-card-footer:before,
			.mui-card-header:after {
				background: none;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<!-- 菜单具体展示内容 -->
			<div class="mui-card">
				<div class="mui-card-header mui-card-media">
					<div class="tx">
						<img id="userheadimg" src="images/user-photo.png" />
					</div>
				</div>
				<div class="mui-card-content"><span id="account">用户</span><span id="msg-hello">，欢迎您！</span></div>
				<!--页脚，放置补充信息或支持的操作-->
				<div class="mui-card-footer"></div>
			</div>
			<div class="mui-card" style="margin-top: 8vw;">
				<div class="mui-card-content">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell menu-cell menu-li-button menubtn" id="pages/monitor.html">
							<span id="btn_monitor">状态监控</span>
							<span class="mui-badge mui-badge-primary">4</span>
						</li>
						<li class="mui-table-view-cell menu-cell menu-li-button  menubtn" id="pages/terminalmanager.html">
							<span id="btn_terminal">设备管理</span>
						</li>
						<!--<li class="mui-table-view-cell menu-cell menu-li-button" id="pages/monitor.html">
								应用设置
							</li>-->
						<!--<li class="mui-table-view-cell menu-cell menu-li-button" id="pages/warn.html">
										监控报警
										<span class="mui-badge mui-badge-danger">1</span>
									</li>-->
						<li class="mui-table-view-cell menu-cell menu-li-button  menubtn" id="pages/warnmanager.html">
							<span id="btn_warnconfig">监控设置</span>
						</li>
						<li class="mui-table-view-cell menu-cell menu-li-button  menubtn" id="pages/wifi.html">
							<span id="btn_wifi">配置设备</span>
						</li>
						<li class="mui-table-view-cell menu-cell menu-li-button languagebtn english" language="zh">
							<span id="btn_language">English</span>
						</li>
						<li class="mui-table-view-cell menu-cell menu-li-button  menubtn" id="pages/about.html">
							<span id="btn_about">关于</span>

						</li>
						<li class="mui-table-view-cell menu-cell menu-li-button logoutbtn">登出
						</li>
					</ul>
				</div>
			</div>

		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script type="text/javascript" src="libs/easymob-webim-sdk/jquery-1.11.1.js"></script>
		<script type="text/javascript" src="libs/jquery.i18n.properties.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			var aniShow = "slide-in-right";
			//关于backbutton和menubutton两个按键的说明，在iOS平台不存在，故需隐藏
			//			if(!mui.os.android) {
			//				var span = document.getElementById("android-only")
			//				if(span) {
			//					span.style.display = "none";
			//				}
			//				aniShow = "pop-in";
			//			}
			var subWebview = null,
				template = null,
				index = null;

			//			var settings = app.getSettings();
			//			alert("menu");
			var account = document.getElementById('account');

			mui.plusReady(function() {
				//				var language=app.getLanguage();
				//				alert(language);
				//				if(language=='en'){
				//					jQuery('#btn_englist').val("中文");
				//				}
				//获得主页面webview引用；
				index = plus.webview.currentWebview().opener();

				var state = app.getState();
				//alert("state" + state.token);
				account.innerText = state.account;
				if(app.getLanguage() == "en") {
					jQuery(".languagebtn").attr("language", "en");
					jQuery("#btn_language").html("中文");
					jQuery.i18n.properties({
						name: 'Messages',
						path: 'bundle/',
						mode: 'both',
						language: app.getLanguage(),
						async: true,
						callback: function() {
							jQuery('#msg-hello').html(i18n_msg_hello);
							jQuery('#btn_monitor').html(i18n_btn_monitor);
							jQuery('#btn_terminal').html(i18n_btn_terminal);
							jQuery('#btn_warnconfig').html(i18n_btn_warnconfig);
							jQuery('#btn_wifi').html(i18n_btn_wifi);
							jQuery('#btn_about').html(i18n_btn_about);
							jQuery('.logoutbtn').html(i18n_logoutbtn);

							// Accessing a simple value through the map
							//					jQuery.i18n.prop('msg_hello');
							//					// Accessing a value with placeholders through the map
							//					jQuery.i18n.prop('msg_complex', 'John');
							//
							//					// Accessing a simple value through a JS variable
							//					alert(msg_hello + ' ' + msg_world);
							//					// Accessing a value with placeholders through a JS function
							//					alert(msg_complex('John'));
						}
					});
				}

			});
			mui('.mui-table-view').on('tap', '.menubtn', function() {
				var id = this.getAttribute("id");
				var type = "aa"; //this.getAttribute("open-type");
				var href = id;
				//					var title = this.innerText;
				template = plus.webview.getWebviewById("main");
				//alert(template);
				//获得共用子webview
				subWebview = template.children()[0];
				//alert(subWebview);
				//通知模板修改标题，并显示隐藏右上角图标；
				mui.fire(template, 'menu:close');
				if(subWebview.getURL() != href) {
					subWebview.loadURL(href);
				} else {
					subWebview.show();
				}
				template.show('slide-in-right', 150);
			});

			mui('.mui-table-view').on('tap', '.languagebtn', function() {
				var language = this.getAttribute("language");
				if(language == "zh") {
					app.setLanguage("en");
					jQuery("#btn_language").html("中文");
					this.setAttribute("language", "en");
					plus.nativeUI.toast("Change Language!");
				} else {
					app.setLanguage("zh");
					jQuery("#btn_language").html("English");
					this.setAttribute("language", "zh");
					plus.nativeUI.toast("切换语言中!");
				}

				setTimeout(function() {
					plus.webview.currentWebview().reload();
					plus.webview.getWebviewById("main").children()[0].reload();
				}, 100);
			});

			mui('.mui-table-view').on('tap', '.logoutbtn', function() {
				app.logout();
				setTimeout(function() {
					template = plus.webview.getWebviewById("main");
					mui.fire(template, 'menu:close');
					template.show('slide-in-right', 150);
					plus.webview.currentWebview().hide();
					plus.webview.getWebviewById("main").hide();
					//				var statu=app.getState();
					//				alert(JSON.stringify(statu));
				}, 1000);
			});

			/**
			 * 关闭侧滑菜单
			 */
			function close() {
				mui.fire(mui.currentWebview.opener(), "menu:close");
			}

			//点击“关闭侧滑菜单”按钮处理逻辑
			//			document.getElementById("close-btn").addEventListener("tap", close);
			//在android4.4.2中的swipe事件，需要preventDefault一下，否则触发不正常
			window.addEventListener('dragstart', function(e) {
				mui.gestures.touch.lockDirection = true; //锁定方向
				mui.gestures.touch.startDirection = e.detail.direction;
			});
			window.addEventListener('dragleft', function(e) {
				if(!mui.isScrolling) {
					e.detail.gesture.preventDefault();
				}
			});
			//监听左滑事件，若菜单已展开，左滑要关闭菜单；
			window.addEventListener("swipeleft", function(e) {
				if(Math.abs(e.detail.angle) > 170) {
					close();
				}
			});
		</script>
	</body>

</html>